<script setup lang="ts">
import {RouterView, useRoute} from 'vue-router'
import SideBar from "@/views/SideBar.vue"
import Header from "@/components/Screen/Header.vue"
import FooterPlayer from "@/components/Screen/FooterPlayer.vue"
import PlaylistDrawer from "@/components/Screen/PlaylistDrawer.vue"
import { onBeforeMount, onMounted, ref, provide } from 'vue'
import {HomeDataService} from '@/apis/index'
import { useUserStore,usePlayerViewStore} from '@/stores/'
import PlayerMusic from "@/views/Player/PlayerMusic.vue"
import AppContextMenu from '@/components/contextMenu/AppContextMenu.vue'

const playerView = usePlayerViewStore()

const route = useRoute()

const userStore = useUserStore()

const keepAlive = ref(false)

provide("ScrollHeight",50)

onBeforeMount(()=>{
  keepAlive.value = route.meta.keepAlive !== undefined && route.meta.keepAlive == true;
})

let moreDataTimer :number | undefined= undefined
const scrollView = ref<any>(null)

const handleScroll = () => {
  const view = document.getElementById("main")
  if(view  && ((view.scrollHeight - view.scrollTop - view.clientHeight) <= 100))
  {
    if(!moreDataTimer)
    {
      // console.log("清除定时器")
      //clearTimeout(moreDataTimer)
      moreDataTimer = setTimeout(()=>{
        if(scrollView.value)
        {
          if(scrollView.value.handleScroll != undefined)
          {
            scrollView.value.handleScroll()
          }
        }
        moreDataTimer = undefined
      },500)
    }

  }
}


onMounted(async ()=>{
  const res = await HomeDataService()
  userStore.setUserInfo(res.data.current_user)
  userStore.setUserPlayList(res.data.playlists)
})
const onContextMenuHtml = (event: MouseEvent)=>{
  console.log("html 菜单")
  console.log(event)
  event.preventDefault()
}

const onContextMenu = (event: MouseEvent)=>{
  console.log("标题栏右键菜单")
  console.log(event)
  event.preventDefault()
  event.stopPropagation()
}
</script>

<template>
  <div class="common-layout">
    <el-container @contextmenu="onContextMenuHtml">
      <el-aside width="210"><SideBar /></el-aside>
      <el-container class="context">
        <el-header><Header @contextmenu="onContextMenu"></Header></el-header>
        <el-main class="main" id="main"  @scroll="handleScroll" >
           <router-view v-slot="{ Component }" v-if="!keepAlive">
             <transition name="fade">
               <component ref="scrollView" :is="Component" />
             </transition>
           </router-view>

            <router-view v-slot="{ Component }" v-if="keepAlive">
              <keep-alive>
                <transition name="fade">
                  <component ref="scrollView" :is="Component" />
                </transition>
              </keep-alive>
            </router-view>

        </el-main>

        <el-footer>
          <FooterPlayer />
<!--          <FooterPlayer @update:OpenPlaylist="handlePlaylistDrawerOpen" />-->
        </el-footer>
      </el-container>
    </el-container>
  </div>
  <PlaylistDrawer></PlaylistDrawer>
<!--  <PlaylistDrawer :Display="PlayListDrawerDisplay" @update:closeDrawer="handlePlaylistDrawerClose"></PlaylistDrawer>-->
  <transition>
    <PlayerMusic v-if="playerView.show" class="player"></PlayerMusic>
  </transition>

  <transition>
    <AppContextMenu />
  </transition>

</template>

<style lang="scss" scoped>
.player{
  position: fixed;
  z-index: 1000;
  top: 0;
}

@keyframes showPlayer {
  from{
    top: 100vh;
  }
  to{
    top: 0;
  }
}

.el-aside{
  height: 100vh;
  width: 210px;
  overflow-x: hidden;

  &::-webkit-scrollbar{
    height: 0px;
    width: 0px;
  }
  //overflow-y: scroll;
  scroll-behavior: auto;

  &::-webkit-scrollbar-thumb{
    background-color: #d3d3d3;
    border-radius: 5px;
  }

}

.context{
  position: relative;
  padding-left: 40px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  background-color: #f6f6f6;


  .el-header{
    z-index: 1000;
    width: 100%;
    background-color: #f6f6f6;
    height: 75px;
    padding: 0 20px 0 0;
    flex: 0 0 75px;
  }

  .el-footer{
    z-index: 100;
    width: 100%;
    background-color: #f6f6f6;
    flex: 0 0 80px;
    padding: 0 40px 0 0;
  }

  .el-main{
    flex: 1;
    background-color: #f6f6f6;
    padding: 0 40px 0 0;
    height: 100%;
    overflow-x: hidden;

    &::-webkit-scrollbar{
      height: 10px;
      width: 10px;
    }
    //overflow-y: scroll;
    scroll-behavior: auto;

    &::-webkit-scrollbar-thumb{
      background-color: #d3d3d3;
      border-radius: 5px;
    }
  }
}


.fade-enter-active{
  transition: all 0.1s ease;
}

.fade-enter-from {
  opacity: 0;
  transform: translateX(100px);
}

.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  top: 100vh;
}


</style>
